<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/9/16
  Time: 9:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>管理员管理</title>
        <style>
            .layui-table-cell {
                /* height: auto !important;*/
                white-space: normal;
                width: 50px;
            }
        </style>
        <meta charset="utf-8">
        <link href="../layui/css/layui.css" rel="stylesheet">
        <script src="../js/jquery-1.12.4.js" type="text/javascript"></script>
        <script src="../layui/layui.js" type="text/javascript"></script>
        <script type="text/javascript">


        layui.use(['table','form'],function () {
                var table = layui.table;
                var form = layui.form;

                //数据展示
                table.render({
                    elem: '#userTable',
                    url: '${pageContext.request.contextPath}/user/selectUser', //数据接口
                    page: true, //开启分页
                    toolbar:"#userToolbar",
                    cols: [[ //表头
                        //{type:"checkbox"},
                        { title: '用户编号',field: 'userId', width:110, sort: true,align:'center'},
                        {title: '电话号码',field: 'userTelephone',align:'center'},
                        {title: '密码',field: 'userPassword',align:'center'},
                        {title: '头像',templet:"#imgTemplet",align:'center'},
                        {title: '昵称',field: 'userNickname',align:'center'},
                        {title: '用户名',field: 'userName',align:'center'},
                        {title: '性别',field: 'userSex',align:'center'},
                        {title: '个性签名',field: 'userAutograph',align:'center'},
                        {title: '省份',field: 'userProvince',align:'center'},
                        {title: '城市',field: 'userCity',align:'center'},
                        {title: '创建时间',field: 'userCreateDate',align:'center'},
                        {title: '关注上师编号',templet:"<div>{{d.guru.userStatus}}</div>",align:'center'},
                        {title: '用户状态',templet: '#userStatus',align:'center'},
                        {title: '操作',templet:"#doTemplet",align:'center',width:200}
                    ]]
                });
            })

            //点击搜索向后台发送数据 如果什么都不填 默认是搜索所有 模糊搜索
        function searchUser() {
            //获取输入框中的数据
            var userName = $("#userName").val();
            //重新加载数据表格，重载的时候可以继续往table.render中添加对应的参数
            var table = layui.table;
            table.reload("userTable", {
                where:{userName:userName}
            })
        }

        //用户状态修改的函数，向后台发送ajax请求做对应的修改，需要两个参数，一个是用户id一个是当前状态
        function updateUserStatus(userStatus,userId,onclickStatus) {
            $.ajax({
                url:"${pageContext.request.contextPath}/user/updateUserStatus",
                data:{"userStatus":userStatus,"userId":userId,"onclickStatus":onclickStatus},
                success:function (data) {
                    //数据重载
                    var table = layui.table;
                    table.reload("userTable")
                }
            })
        }
        </script>
        <script type="text/html" id="userStatus">
            {{#  if(d.userStatus == 0){ }}
            正常
            {{#  } else if(d.userStatus == 1){ }}
            未激活
            {{#  } else if(d.userStatus == 2){ }}
            冻结
            {{#  } else if(d.userStatus == 3){ }}
            删除
            {{#  } }}
        </script>
        <script type="text/html" id="doTemplet">
            {{#  if(d.userStatus == 0){ }}
                <button type="button" class="layui-btn" onclick="updateUserStatus('{{d.userStatus}}','{{d.userId}}',0)">
                    冻结
                </button>
                <button type="button" class="layui-btn layui-btn-danger" onclick="updateUserStatus('{{d.userStatus}}','{{d.userId}}',1)">
                    删除
                </button>
            {{#  } else if(d.userStatus == 1){ }}
                <button type="button" class="layui-btn" onclick="updateUserStatus('{{d.userStatus}}','{{d.userId}}',0)">
                激活
                </button>
            {{#  } else if(d.userStatus == 2){ }}
                <button type="button" class="layui-btn  layui-btn-warm" onclick="updateUserStatus('{{d.userStatus}}','{{d.userId}}',0)">
                    解冻
                </button>
                <button type="button" class="layui-btn layui-btn-danger" onclick="updateUserStatus('{{d.userStatus}}','{{d.userId}}',1)">
                    删除
                </button>
            {{#  } else if(d.userStatus == 3){ }}
                <button type="button" class="layui-btn layui-btn-disabled">
                    已删除
                </button>
            {{#  } }}
        </script>
        <script type="text/html" id="imgTemplet">
            <img src="${pageContext.request.contextPath}{{d.userImage}}" width="100%"/>
        </script>
    </head>
    <body>
        <%--管理员展示的数据表格--%>
        <table id="userTable" lay-filter="user_table"></table>
        <%--数据表格绑定工具栏--%>
        <div id="userToolbar" style="display: none;">
            <div class="layui-inline">
                <label class="layui-form-label">用户名:</label>
                <div class="layui-input-inline" style="width: 260px;">
                    <input type="text" name="userName" id="userName" class="layui-input">
                </div>
                <div class="layui-input-inline" style="width: 100px;">
                    <button type="button" class="layui-btn layui-btn-danger" onclick="searchUser()">
                        <i class="layui-icon layui-icon-search"></i>搜索
                    </button>
                </div>
            </div>
        </div>
    </body>
</html>
